<template>
    <van-index-bar :index-list="indexList[1]">
        <div v-for="item in indexList[0]" :key="item.index">
            <van-index-anchor :index="item.index" style="background:#ccc" />
            <van-cell v-for="(sub, key) in item.data" :title="sub.name" :key="sub.name + key" @click="chooseCity(sub)" />
        </div>
    </van-index-bar>
</template>

<script setup lang="ts">
// 1. 写静态页面，做成组件进行组合
// 配置路由 动态路由、嵌套路由
// 2. 配置 API 接口
// 基础 axios 配置，请求拦截、响应拦截
// 3. 创建响应式数据对象，并渲染到页面上
// 计算属性、watch 监听、生命周期钩子函数
// 4. 对接口返回的数据，进行清洗二次加工
// 过滤器 V3 直接定义方法
// 5. 对页面的其他逻辑功能进行优化完善，数据通信
// 第三方插件调用、其他的 UE 操作 UI 静态页面
import { ref, onMounted } from 'vue'
import { cityListData } from '../api/apis'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const indexList = ref<any>([])

const getCityInfo = async () => {
    let res = await cityListData()
    console.log(res);
    // 数据清洗
    indexList.value = res;
}
getCityInfo();

const router = useRouter()
const store = useStore()
const chooseCity = (city: any) => {
    store.dispatch("setcity", {
        id: city.cityId,
        name: city.name
    })
    router.push('/cinema?cityid=' + city.cityId + '&cityname=' + city.name)
}

onMounted(() => {
    console.log("默认加载地图");
    const geolocation = new window.BMap.Geolocation();
    geolocation.getCurrentPosition((r: any) => {
        console.log("获取到的地址信息是：", r);
    });
})


</script>

<style scoped></style>